import React, { useState } from 'react'
import Taro, { useDidShow, useReachBottom } from '@tarojs/taro'
import {View,Image,Text,Input} from '@tarojs/components'
import {RoundNum} from '@/utils/helper.js'
import './index.scss'

let filters = {
  page:1,
  pageSize: 20
}
export default function ApplyCinema() {
  const [cityInfo,setCityInfo] = useState({})
  const [position,setPosition] = useState(Taro.getStorageSync('position'))
  const [list,setList] = useState([])
  const [loadMore,setLoadMore] = useState('加载中…')
  const [info,setInfo] = useState({})
  const [searchKey,setSearchKey] = useState()
  const [showSearch,setShowSearch] = useState(false)
  useDidShow(()=>{
    _initData()
  })
  useReachBottom(()=>{
    if(filters.totalCount > list.length){
      _getCityList({page:filters.page+1},(data)=>{
        const value = [...list,...data?.list]
        setList(value)
        setLoadMore(filters.totalCount<=value.length?'没有更多了...':'加载更多')
      })
    }else{
      setLoadMore('没有更多了...')
    }
  })
  const _initData = values=>{
    const loca = Taro.getStorageSync('ticketCity') || Taro.getStorageSync('cityInfo')
    if(loca && loca.name){
      setCityInfo(loca || {})
      _getCityList({page:1,...values},e=>{
        setList(e.list)
        setLoadMore(filters.totalCount<=e.list.length?'没有更多了...':'加载更多')
      })
    }
  }
  const _getCityList = (e,fun)=>{
    setLoadMore('加载中…')
    const data = {
      cityCode:Taro.getStorageSync('cityInfo')?.cityCode || Taro.getStorageSync('cityInfo')?.code,
      cinemaIds:Taro.getStorageSync('cinemaIds'),
      page:filters.page,
      pageSize: filters.pageSize,
      longitude:position.longitude,
      latitude:position.latitude,
      ...e
    }
    Taro.$post('/cinema-app/api/v1/cinema/list',data).then(res=>{
      if(res.code == '1'){
        filters = {...filters,...res.content?.pagination}
        fun(res.content)
      }
    })
  }
  return (
    <View className='apply-cinema'>
      <View className="cinema-header">
        {showSearch?<>
        <Image className='search-img' src={require('@/images/common/search.svg')} />
        <Input style={{flex:1,margin:'0 8px'}} onInput={e=>{
          setSearchKey(e.detail.value)
        }} placeholder="请输入影院名称或地址" />
        <Text onClick={()=>{setShowSearch(false);setSearchKey()}}>取消</Text>
        </>:<>
        <View className="header-city" onClick={()=>{
          Taro.navigateTo({
            url:'/mainPages/select-city/index?type=ticket'
          })
        }}>
          <Image className='city-img' src={require('@/images/common/location-black.svg')} />{cityInfo?.name}
        </View>
        <Image className='search-img' onClick={()=>{setShowSearch(true)}} src={require('@/images/common/search.svg')} />
        </>}
      </View>

      <View className="cinema-list">
        <View className="list-main">
          {list?.length?list.map(res=>{
            return searchKey?
              res.cinemaName?.includes(searchKey) || res.address?.includes(searchKey)?<View className="list-item" key={res.id}>
              <View className="item-title">{res.cinemaName}</View>
              <View className="item-info">
                <View className="info-p">{res.address}</View>
                {res.distanceNumber?<View>{RoundNum(res.distanceNumber/1000)}km</View>:null}
              </View>
            </View>:null
            :<View className="list-item" key={res.id}>
            <View className="item-title">{res.cinemaName}</View>
            <View className="item-info">
              <View className="info-p">{res.address}</View>
              {res.distanceNumber?<View>{RoundNum(res.distanceNumber/1000)}km</View>:null}
            </View>
          </View>
          }):<View className='var-empty'>
            暂无数据</View>}
        </View>
      </View>
      <View className="var-more">{loadMore}</View>
    </View>
  )
}
